<!-- 底部导航栏 -->
<template>
	<view class="box">
		<u-tabbar :value="index" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" icon="home" @click="click('Home', 0)"></u-tabbar-item>
			<u-tabbar-item text="分类" icon="grid" @click="click('Sort', 1)"></u-tabbar-item>
			<u-tabbar-item text="菜谱" icon="order" @click="click('Menu', 2)"></u-tabbar-item>
			<u-tabbar-item text="购物车" icon="car" @click="click('MyCart', 3)"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="click('Me', 4)"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
export default {
	name: 'xrzp-FootTabbar',
	data() {
		return {
			index: 0,
			arr: ['Home', 'Sort', 'Menu', 'MyCart', 'Me']
		};
	},
	mounted() {
		let routes = getCurrentPages();
		let route = routes[routes.length - 1].route.split('/')[2];
		this.index = this.arr.indexOf(route);
	},
	methods: {
		click(to, index) {
			if(this.index !== index ){
				uni.navigateTo({
					url: `/pages/${to}/${to}`
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.u-tabbar {
	::v-deep .u-tabbar__content {
		bottom: -8rpx !important;
	}
}
</style>
